<style lang="less">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <div class="list-action-btn">
                <Button type="error" size="large" @click="jumpPage('','ExpressInfoAdd')">添加快递信息</Button>
            </div>
            <div class="search-block">
                <!--<Input v-model="searchUserInput" class="input-search" placeholder="根据姓名/证件号查找" style="width: 200px"></Input>-->
                <!--&lt;!&ndash;<Input v-model="value" class="input-search" placeholder="根据证件号查找" style="width: 200px"></Input>&ndash;&gt;-->
                <!--<Button type="ghost" @click="searchUserEvent()" icon="ios-search">搜索</Button>-->

                <i-input v-model="searchUserInput">
                    <i-select slot="prepend" style="width: 80px">
                        <i-option value="姓名">姓名</i-option>
                    </i-select>
                    <i-button slot="append" @click="searchUserEvent()" icon="ios-search"></i-button>
                </i-input>
            </div>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <!--<div style="margin: 10px;overflow: hidden;">-->
            <!--<div style="float: right;">-->
                <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
                      <!--@on-change="changePage"></Page>-->
            <!--</div>-->
        <!--</div>-->
        <!--用户取件-->
        <Modal v-model="setIsShow" title="选择收件人" @on-ok="handleSubmit('formValidate')"
               @on-cancel="setIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <selectSearch :selectBaseInfo="selectBaseInfo" @post-data="getCompentensData"></selectSearch>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import selectSearch from '../../components/selectSearch';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                updateId:'',
                images: [],
                //用户取件弹窗
                setIsShow: false,
                userId: '',
                formValidate: {
                },
                //选择取件员人
                selectBaseInfo: {
                    "title": '选择人员',
                    "placeholder": '请输入姓名',
                    "postUrl": apiUtil.urls.userList,
                    'postType': 'user',
                },
                //添加快递信息
                isAddExperssIsShow:true,
                searchUserInput:'',
                getExpressId:'',
                reqpeopleDept: '',
                ruleValidate: {},
                apiUtilBase: apiUtil.urls.baseUrl,
                tableColumns: [
                    {
                        title: '快递单号',
                        key: 'Expresscode',
                        align: 'center',

                    },
                    {
                        title: '收件人',
                        key: 'Peoplename',
                        align: 'center',

                    },
                    {
                        title: '收件人地址',
                        key: 'Peopleaddress',
                        align: 'center',

                    },
                    {
                        title: '收件人电话',
                        key: 'Peoplecontact',
                        align: 'center',

                    },
                    {
                        title: '快递公司',
                        key: 'Expresscompany',
                        align: 'center',

                    },
                    {
                        title: '状态',
                        key: 'State',
                        align: 'center',

                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:'',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row.Id)
                                            }
                                        }
                                    }, '删除'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {

                                                this.setIsShow = true;
                                                this.getExpressId =params.row.Id;
                                            }
                                        }
                                    }, '取件'),
                                ]
                            )
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        components: {
            selectSearch
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route='';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                this.$router.push(route);
            },

            mockTableData() {
                let that = this;

                let para = {
                    current: this.current,
                    limit: 7,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that,apiUtil.urls.ExpressInfoList, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;

                    console.log('tableData:', res)

                });

            },
            remove(index) {
                let that = this;
                this.$Modal.confirm({
                    title: '删除',
                    content: `是否删除此快递信息吗`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {id: index};
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that,apiUtil.urls.DelExpressInfo, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                // this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                // })
            },
            //设置指定Id的快递为已取件
            comfirmModifyPS: function (model) {
                let that = this;
                model.id =this.getExpressId;
                model.peopleId =this.reqpeopleDept.resultId;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.GetExpreeToHome, params, function (res) {
                    that.mockTableData();
                });
            },
            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {
                this.reqpeopleDept = value;
            },
            //根据快递收件人姓名查找
            searchUserEvent: function () {
                let that = this;
                let para = {
                    peopleName: this.searchUserInput
                };

                apiUtil.get(that, apiUtil.urls.SearchExpressInfo, para, function (res) {
                    that.tableData = res.Msg;
                });
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.images = [];
                this.mockTableData();
            }
        },
    }
</script>